<!--
 * @version: 
 * @Author: yu
 * @Date: 2023-06-16 11:15:13
 * @LastEditors: Andy
 * @LastEditTime: 2023-06-20 13:43:21
-->
<template>
    <div class="container">
        <div class="echarts" ref="main"></div>
    </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
    data() {
        return {
            nameList: [],  //种植类目
            areaList: [], //种植面积
        }
    },
    methods: {
        //获取各地区种植面积
        requestTop() {
            this.$axios.get('/api/plantingAreaTop').then(res => {
                // console.log(res);
                if (res.status === 200) {
                    //根据面积进行数据的排序
                    res.data.sort((a, b) => {
                        return a.area - b.area    //重大到小
                        // return b.area - a.area      //重小到大
                    })
                    //获取种植类目
                    this.nameList = res.data.map(item => item.name)
                    //获取种植面积
                    this.areaList = res.data.map(item => item.area)
                }
                //设置选项
                this.option = {
                    title: { //标题
                        text: '各地区种植面积统计TOP10', //主标题
                        left: 15,
                        top: 30
                    },
                    grid: {  //组件距离容器的位置
                        top: '20%',
                        left: '15%',
                        right: '20%',
                        bottom: '10%'
                    },
                    xAxis: { //x轴
                        type: 'value', //类型：数值轴
                        axisLine: { show: true },  //显示坐标轴轴线
                    },
                    yAxis: { //y轴
                        type: 'category', //类型：类目轴
                        data: this.nameList
                    },
                    tooltip: {  //是否显示提示框组件
                        show: true
                    },
                    axisPointer: { //是否坐标轴指示器
                        show: true,
                        type: 'line'  //'line' 直线指示器   'shadow' 阴影指示器   'none' 无指示器
                    },
                    toolbox: {   //工具栏
                        show: true,
                        feature: {
                            saveAsImage: { show: true },  //是否保存图片格式
                            dataView: { show: true },     //数据视图工具,可以展现当前图表所用的数据
                            magicType: {  //动态类型切换动态类型切换  包括'line'（切换为折线图）, 'bar'（切换为柱状图）, 'stack'（切换为堆叠模式）。
                                show: true,
                                type: ['line', 'bar']
                            },
                            restore: {  //还原
                                show: true
                            },
                        }
                    },
                    series: {  //图标数据配置
                        type: 'bar',
                        data: this.areaList,
                        label: {  //图形上的文本标签
                            show: true,
                            position: 'right',
                            color: '#36bde3',
                            fontSize: 13,
                            fontWeight: 700
                        },
                        itemStyle: { //折线拐点标志的样式。
                            //渐变色或者纹理填充
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 1,
                                y2: 0,
                                colorStops: [{
                                    offset: 0, color: '#123e62' // 0% 处的颜色
                                }, {
                                    offset: 1, color: '#36bde3' // 100% 处的颜色
                                }],
                            }
                        },
                        emphasis: {  //折线图的高亮状态。
                            itemStyle: {
                                opacity: 1,
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: 'red' // 0% 处的颜色
                                    }, {
                                        offset: 1, color: 'green' // 100% 处的颜色
                                    }],
                                }
                            }
                        }
                    }
                }

                //3.使用echarts实列设置配置项
                this.myEschars.setOption(this.option)
            });
        },
        screen() {
            // console.log(1123);
            //图表实现自适应
            // console.log(this.myEschars.resize);
            this.myEschars.resize();
            //修改图标的标题，实现自适应
            let width = this.$refs.main.offsetWidth
            //获取字体的大小
            // console.log(width);
            let num = width / 100 * 6;
            // console.log(num);
            //重新设置option的某个选项
            this.option = {
                title: {
                    textStyle: {
                        fontSize: num
                    }
                }
            }
            //3.使用echarts实列设置配置项
            this.myEschars.setOption(this.option)
        },
        init() {
            //1.获取res节点
            const oDiv = this.$refs.main;
            //2.创建echarts实列
            this.myEschars = this.$echarts.init(oDiv, this.theme);
        }
    },
    mounted() {
        //初始化
        this.init()
        //发起各地区种植面积统计T0P10
        this.requestTop();
        // this.screen()
        //添加window的监听事件
        window.addEventListener('resize', this.screen)
    },
    destroyed() {
        //移除window的监听事件
        window.removeEventListener('resize', this.screen)
    },
    watch: {
        theme() {
            // console.log(112321123);
            // console.log(this.myEschars);
            //销毁之前的echarts实列
            this.myEschars.dispose();
            this.init();
            this.requestTop();
            // this.screen()
        }
    },
    computed: {
        ...mapGetters({
            theme: 'home/theme'
        })
    },
    filters: {},
    components: {}
}
</script>
<style scoped></style>